<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css_盒子的内容区_content</title>
  <style>
        div{
            width: 300px;
            max-width: 200px;
            min-width: 100px;
            height: 300px;
            max-height: 200px;
            min-height: 100px;
            background-color: red;
        }

  </style>
</head>
<body>
<!--
    盒子的内容区：
    1.width：设置元素的宽度
    2.max-width：设置元素的最大宽度
    3.min-width：设置元素的最小宽度
    4.height：设置元素的高度
    5.max-height：设置元素的最大高度
    6.min-height：设置元素的最小高度
    注意：max-width、min-width 一般不和width一起使用，
        max-height、min-height 一般不和height一起使用。
    关于盒子的默认宽度：
        在不设置width属性时，元素所呈现出来的宽度。
        总宽度= 父元素的content - 自身的左右margin
        内容区的宽度 = 父元素的content - 自身的左右margin - 自身的左右border -自身的左右padding


-->
    <div>
        这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素
    </div>
</body>
</html>